/* ==========================================================================
   Forge Components – components.css
   --------------------------------------------------------------------------
   • Card, Alert, Badge, Button variants, Grid, Modal shell
   • Pure CSS (no JS) to provide sensible defaults
   • Uses u‑utility hooks for layout tweaks
   ========================================================================== */

/* 1. Card --------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-base);
    padding: var(--space-md);
}
.card--flush {
    padding: var(--space-sm);
}
.card--borderless {
    border: 0;
    box-shadow: none;
}

/* 2. Alert / Flash ------------------------------------------------------ */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-left: .25rem solid currentColor;
    border-radius: var(--radius-base);
    font-weight: 500;
    background: var(--color-surface);
    color: var(--color-text);
}

/* modifier colours (leverages brand tokens) */
.alert--success {
    color: var(--color-success);
}
.alert--error {
    color: var(--color-error);
}
.alert--info {
    color: var(--color-info);
}
.alert--warning {
    color: var(--color-warning);
}

/* 3. Badge -------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 0 var(--space-xs);
    border-radius: var(--radius-pill, 9999px);
    font-size: var(--fs-small);
    line-height: 1.4;
    background: var(--color-border);
    color: var(--color-text);
}
.badge--success {
    background: var(--color-success);
    color: var(--color-neutral-100);
}
.badge--error {
    background: var(--color-error);
    color: var(--color-neutral-100);
}
.badge--info {
    background: var(--color-info);
    color: var(--color-neutral-100);
}

/* 4. Button variants ---------------------------------------------------- */
.btn {
    @apply button;
}
/* inherit base button rules from form.css */
.btn--outline {
    background: transparent;
    color: var(--color-brand);
    border: 2px solid var(--color-brand);
}
.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--color-brand);
    color: var(--color-surface);
}

.btn--ghost {
    background: transparent;
    color: var(--color-text);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var(--color-surface-muted, hsla(0, 0%, 0%, .05));
}

/* 5. Grid helper (simple masonry) --------------------------------------- */
.grid {
    display: grid;
    gap: var(--space-sm);
}
.grid--2 {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.grid--3 {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

/* 6. Accordion (summary/details) ---------------------------------------- */
.accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
}
.accordion summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-sm) var(--space-md);
    font-weight: 600;
}
.accordion summary::-webkit-details-marker {
    display: none;
}
.accordion[open] summary {
    background: var(--color-surface-alt, hsla(0, 0%, 0%, .03));
}
.accordion > *:not(summary) {
    padding: var(--space-sm) var(--space-md);
}

/* 7. Modal shell (requires a tiny JS toggle) ---------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}
.modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-base);
    max-width: 36rem;
    width: 100%;
    box-shadow: var(--shadow-lg, 0 4px 16px hsla(0, 0%, 0%, .15));
    padding: var(--space-lg);
}

/* 8. Table wrapper ------------------------------------------------------ */
.table-responsive {
    overflow-x: auto;
}

/* 9. Progress bar ------------------------------------------------------- */
.progress {
    width: 100%;
    height: .5rem;
    background: var(--color-border);
    border-radius: var(--radius-pill, 9999px);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    width: 0;
    background: var(--color-brand);
    transition: width .3s ease;
}

/* 10. Tag cloud --------------------------------------------------------- */
.tag {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: var(--radius-pill, 9999px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: var(--fs-small);
    line-height: 1.3;
    color: var(--color-text);
}